<template>
  <div>
    <div class="videoUpload">
      <div>
        <p class="title">分享你的作品</p>
      </div>
      <progressDrop class="prog" v-if="isUpload" :current="progress"></progressDrop>
      <div>
        <label for="title">标题:</label>
        <input type="text" id="title" v-model="title" required maxlength="20" />
        <p class="warn" v-if="!title">*请输入你的作品的标题</p>
      </div>
      <div>
        <label for="way">选择你的内容:</label>
        <select id="way" v-model="way" @change="chooseWay">
          <option value="video">视频</option>
          <!-- <option value="text">专栏</option> -->
        </select>
      </div>
      <div v-if="way=='video'">
        <label for="prod">上传视频:</label>
        <input type="file" id="prod" @change="chooseVideoFile" />
        <button>点击上传视频</button><span style="color:blue" v-if="ifNeedupdateVideo">非必要</span>
        <span class="fileName">{{videoName}}</span>
        <p class="warn" v-if="ifuploadVideo">*请选择你要上传的视频</p>
      </div>
      <div v-if="way=='text'">
        <label for="text">专栏:</label>
        <button @click="startWrite">点击书写专栏</button>
        <transition name="fadeScale">
          <div class="write" v-show="ifWrite">
            <!-- <mavon-editor
              v-model="text"
              ref="md"
              style="min-height: 600px"
              :codeStyle="codeStyle"
              @save="save"
              class="mavonWrite"
            /> -->
          </div>
        </transition>
        <p class="warn" v-if="!(text.trim())">*请选择你要上传的专栏</p>
      </div>
      <div>
        <label for="poster">视频(专栏)封面:</label>
        <input type="file" id="poster" @change="chooseImgFile" />
        <button>点击上传封面</button>
        <span class="fileName">{{imgName}}</span>
      </div>
      <div id="box">
        <img :src="currentPoster" alt="点击上方预览图片" />
      </div>
      <div>
        <label for="introduce">简介:</label>
        <textarea
          name
          id="introduce"
          cols="30"
          rows="10"
          v-model="introduce"
          placeholder="简单介绍一下你的作品把(选填)"
        ></textarea>
      </div>
      <button @click="uploadVideo" :disabled="(currentChoose)&&isUpload">开始上传</button>
      <button @click="cancelAddProd" :disabled="isUpload">取消</button>
    </div>
  </div>
</template>

<script>
import Bus from "../bus";
import { updateFriendState } from "../store.js";
import progressDrop from "../components/progress";
export default {
  data() {
    return {
      flag:false,
      isUpload: false,
      ifWrite: false,
      codeStyle: "vs2015",
      title: "",
      way: "video",
      //这里text和render反了注意
      text: "",
      render: "",
      introduce: "",
      imgName: "",
      videoName: "",
      imgUploadSrc: "",
      poster: "",
      id: 0,
      progress: 0,
      origin: "add",
      format: ""
    };
  },
  mounted() {
    if (updateFriendState.origin === "add") {
      this.origin = updateFriendState.origin;
    } else {
      this.id = updateFriendState.id;
      this.text = updateFriendState.text;
      this.render = updateFriendState.render;
      this.introduce = updateFriendState.introduce;
      this.title = updateFriendState.title;
      this.origin = updateFriendState.origin;
      this.poster = updateFriendState.poster;
      this.way = updateFriendState.way;
    }
  },
  components: {
    progressDrop,
  },
  computed: {
    ifuploadVideo(){
      return this.origin==='add'&&!this.videoName
    },
    ifNeedupdateVideo(){
      return this.origin === "update"
    },
    currentPoster() {
      if (this.poster && !this.imgUploadSrc) {
        return this.poster;
      } else if (!this.poster && this.imgUploadSrc) {
        return this.imgUploadSrc;
      } else if (this.poster && this.imgUploadSrc) {
        return this.imgUploadSrc;
      } else {
        return "";
      }
    },
    currentChoose() {
      if(this.origin === "add"){
      return this.title && (this.videoName || this.text.trim()); //当前是否把必选的都选了

      }else{
        return this.title
      }
    },
    Videoinput() {
      return document.querySelector("#prod");
    },
    Imginput() {
      return document.querySelector("#poster");
    },
  },
  methods: {
    chooseWay() {
      this.text = "";
      this.videoName = "";
    },
    save(text, render) {
      console.log(render);
      this.render = render;
      this.text = text;
      this.ifWrite = false;
    },
    startWrite() {
      this.ifWrite = true;
    },
    cancelAddProd() {
      this.videoName = "";
      this.$emit("cancelAddProd");
    },
    chooseVideoFile() {
      if (this.Videoinput && this.Videoinput.files[0]) {
        if (this.Videoinput.files[0].size / 1024 /1024 > 500) {
          alert("视频大小不能超过500M");
          Bus.$emit("finishChange", "error");
          return false;
        }
        let aa = this.Videoinput.files[0].name.split(".");
        if (
          aa[aa.length - 1] == "wav" ||
          aa[aa.length - 1] == "mp3" ||
          aa[aa.length - 1] == "mp4" ||
          aa[aa.length - 1] == "m4a"
        ) {
          this.format = aa[aa.length - 1]
          this.videoName = this.Videoinput.files[0].name;
        } else {
          alert("只允许wav,mp3,mp4,m4a格式的视频或音频");
          Bus.$emit("finishChange", "error");
          return false;
        }
      }
    },
    chooseImgFile() {
      if (this.Imginput.files[0]) {
        if (this.Imginput.files[0].size / 1024 > 500) {
          alert("图片大小不能超过500k");
          Bus.$emit("finishChange", "error");
          return false;
        }
        let aa = this.Imginput.files[0].name.split(".");
        if (
          aa[aa.length - 1] == "jpg" ||
          aa[aa.length - 1] == "bmp" ||
          aa[aa.length - 1] == "png" ||
          aa[aa.length - 1] == "jpeg"
        ) {
          this.imgName = this.Imginput.files[0].name;
          console.log(this.Imginput.files[0]);

          let url = window.webkitURL || window.URL;
          let imgfileurl = url.createObjectURL(this.Imginput.files[0]);
          this.imgUploadSrc = imgfileurl;
        } else {
          alert("只允许jpg,jepg,png,bmp格式的图片");
          Bus.$emit("finishChange", "error");
          return false;
        }
      }
    },
    uploadVideo() {
      this.flag = true
      if(this.flag){
        const data = new FormData();
      data.append("username", this.$store.getters.user.username);
      data.append("title", this.title);
      data.append("origin", this.origin);
      data.append("way", this.way);
      data.append("mp4file", this.Imginput.files[0]);
      data.append("status", this.$store.getters.user.status);
      if (this.origin === "update") {
        data.append("id", this.id);
      }
      if (this.Videoinput && this.Videoinput.files[0]) {
        data.append("format", this.format);
        data.append("mp4file", this.Videoinput.files[0]);
      }
      if (this.introduce !== "") {
        data.append("introduce", this.introduce);
      }
      if (this.text !== "") {
        data.append("format", "txt");
        data.append("text", this.render);
        data.append("render", this.text);
      }
      let currentVue = this;
      this.isUpload = true;
      this.$axios
        .post("/upload/upMp4", data, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
          onUploadProgress(progressEvent) {
            if (progressEvent.lengthComputable) {
              let val = (
                (progressEvent.loaded / progressEvent.total) *
                100
              ).toFixed(0);
              // that.formData.showProgress = true;
              console.log(currentVue.progress);

              currentVue.progress = parseInt(val)-1;
            }
          },
        })
        .then((res) => {
          console.log(res);
          if (res.data.error === -1) {
            this.videoName = "";
            // this.clearFile()
            this.$emit("getVideoList");
            this.$emit("successMsg");
            this.cancelAddProd();
          } else {
            this.$emit("errorMsg");
          }
        })
        .finally(() => {
          this.ifUpload = false
          this.flag = false
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../css/comment/animate.css");

.videoUpload {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 999999;
  width: 40%;
  background-color: #fff;
  padding: 20px 28px;
  border-radius: 20px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: 100;
  box-shadow: 0 0 11px 0px #000;
  .prog {
    top: 0;
    right: 0;
  }
  #box {
    width: 250px;
    height: 100px;
    border: 1px solid #e5e5e5;
    img {
      width: 100%;
      height: 100%;
    }
  }
  div {
    position: relative;
    margin: 18px 15px;
    .warn {
      color: red;
      font-size: 13px;
      letter-spacing: 2px;
      position: absolute;
    }
    .title {
      text-align: center;
      font-size: 23px;
      margin: 10px 25px;
    }
    .write {
      height: 500px;
      position: absolute;
      top: -220px;
      width: 150%;
      left: -30%;
      // overflow: scroll;
      .mavonWrite {
        height: 50%;
      }
    }

    select {
      padding-left: 15px;
      width: 30%;
      height: 30px;
      margin-left: 15px;
    }
    input {
      padding: 5px 10px;
      border: 1px solid #dddddd;
      width: 50%;
      height: 20px;
      margin-left: 15px;
      transition: all 0.4s;
      &:focus {
        box-shadow: 0 0 5px 0px #91beff;
      }
    }
    input[type="file"] {
      width: 150px;
      opacity: 0;
      position: absolute;
      top: 0;
    }
    textarea {
      resize: none;
      width: 100%;
      height: 100px;
      box-sizing: border-box;
      padding: 15px;
      // margin: 5px 28px;
      transition: all 0.4s;
      &:focus {
        box-shadow: 0 0 5px 0px #91beff;
      }
    }
    button {
      padding: 0 15px;
      width: 150px;
      height: 30px;
      border: none;
      background-color: #ddd;
      margin-left: 15px;
      outline: none;
    }
  }
  button {
    border: 2px solid black;
    width: 100px;
    height: 30px;
    border-radius: 30px;
    transition: all 0.4s;
    margin: 0 5%;
    &:hover {
      border: 2px solid #e4efff;
      background-color: #e4efff;
      color: #000;
    }
  }
}
@media screen and (max-width: 765px) {
  .videoUpload {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    z-index: 99999;
    width: 90%;
    background-color: #fff;
    padding: 20px 5px;
    border-radius: 20px;
    margin: 0 auto;
    font-size: 17px;
    font-weight: 100;
    box-shadow: 0 0 11px 0px #000;
    div {
      .write {
        height: 500px;
        position: absolute;
        top: -170px;
        width: 100%;
        left: 0;
        margin: 0;
        // overflow: scroll;
        .mavonWrite {
          height: 50%;
          margin: 0;
        }
      }
    }
  }
}
</style>